import React from 'react';
import { SearchOutlined } from '@ant-design/icons';
import { DatePicker, Space, Button,Table} from 'antd';
import { createFromIconfontCN } from '@ant-design/icons';
import "./Amount.css"
const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_3854078_irqnhtsazkq.js', // 在 iconfont.cn 上生成
});
const Amount = () => { 
   
      const columns = [
       
        {
          title: '序号',
          dataIndex: 'name',
        },
        
        {
          title: 'ID',
          dataIndex: 'name',
        },
        {
          title: '成交金额(元)',
          dataIndex: 'chinese',
          sorter: {
            compare: (a:any, b:any) => a.chinese - b.chinese,
            multiple: 3,
          },
        },
        {
          title: '成交时间',
          dataIndex: 'math',
          sorter: {
            compare: (a:any, b:any) => a.math - b.math,
            multiple: 2,
          },
        },
        {
          title: '状态',
          dataIndex: 'english',
          sorter: {
            compare: (a:any, b:any) => a.english - b.english,
            multiple: 1,
          },
        },
      ];
      const data = [
        {
          key: '1',
          name: 'John Brown',
          chinese: 98,
          math: 60,
          english: 70,
        },
        {
          key: '2',
          name: 'Jim Green',
          chinese: 98,
          math: 66,
          english: 89,
        },
        {
          key: '3',
          name: 'Joe Black',
          chinese: 98,
          math: 90,
          english: 70,
        },
        {
          key: '4',
          name: 'Jim Red',
          chinese: 88,
          math: 99,
          english: 89,
        },
      ];
      const onChange = (pagination:any, filters:any, sorter:any, extra:any) => {
        console.log('params', pagination, filters, sorter, extra);
      };
    return (
        <fieldset>
        <div className="box">
            <div className="leftbox">
                <div className="left">
                    <MyIcon type="icon-jinbi" className='icon' />
                </div>
                <div className="right">
                    <div className='one'>
                        1.2234.3456.00 
                    </div>
                    <div className='two'>总成交金额(元)</div>
                </div>
            </div>
            <div className="rightbox">
                <div className="lefttwo">
                    <MyIcon type="icon-yishoukuan" className='icon' />
                </div>
                <div className="right">
                    <div className='one'>
                        3456.00
                    </div>
                    <div className='two'>当天成交额(元)</div>
                </div>
            </div>
        </div>
           
                 <button className='button1'>
                    <MyIcon type="icon-duihao" />
                     全部订单
                 </button>
                 <button className='button4'>
                    <MyIcon type="icon-31leimu" />
                     当天订单
                 </button>
                 <button className='button2'>
                    <MyIcon type="icon-shanchu" />
                     当月订单
                 </button>
            <Table columns={columns} dataSource={data} onChange={onChange} />
        </fieldset>
        
    )
}

export default Amount